<template>
  <boadrContainerVue>
    <div class="sceen-content-body">
      <Item1 :is-comp="isComp" />
      <Item2 :is-comp="isComp" />
      <Item6 v-if="!isMobile" :is-comp="isComp" />
      <Item4 :is-comp="isComp" />
      <div class="item5">
        <Item5 :is-comp="isComp" />
        <Item7 :is-comp="isComp" />
      </div>
      <Item6 v-if="isMobile" :is-comp="isComp" />
      <Item65 :is-comp="isComp" />
      <Item3 :is-comp="isComp" />
    </div>
  </boadrContainerVue>
</template>

<script setup lang="ts">
import boadrContainerVue from '../compNew/boadrContainer.vue';
import { onMounted, onUnmounted, ref, defineProps,} from 'vue';
import Item1 from './item1/index.vue';
import Item2 from './item2N/index.vue';
import Item3 from './item3/index.vue';
import Item4 from './item4/index.vue';
import Item5 from './item5/index.vue';
import Item6 from './item6/index.vue';
import Item65 from './item65/index.vue';
import Item7 from './item7/index.vue';
// import defaultScence from '@/assets/images/defaultSence.svg'
const props = defineProps<{
  isComp: boolean
}>();
const isMobile = ref(false)
const setIsMobile = () => {
  if (document.body.clientWidth < 800) {
    isMobile.value = true;
  }
}
onMounted(() => {
  setIsMobile()
  window.addEventListener('resize', () => {
    setIsMobile();
  });
});

onUnmounted(() => {
  
});
</script>

<style lang="scss" scoped>
.sceen-content-body {
  height: 100%;
  display: grid;
  grid-gap: 6px;
  grid-template-columns: 2fr 3fr 2fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 'a b c'
    'd e f'
    'd e g';
  overflow: hidden;

  .item4 {
    grid-area: d;
  }

  .item5 {
    grid-area: e;
    display: grid;
    grid-auto-rows: 2fr 1fr;
    grid-template-columns: 1fr;
    grid-row-gap: 6px;
  }

  @media screen and (max-width: 800px) {
    overflow-y: auto;
    min-height: 100%;
    overflow-y: auto;
    display: block;
    padding-bottom: 20px;

    .board-box-1 {
      height: 30vh;
      margin-top: 20px;
    }

    .board-box-2 {
      height: 30vh;
      margin-top: 20px;
    }

    .board-box-3 {
      height: 30vh;
      margin-top: 20px;
    }
    .box3-fu {
      height: 40vh;
    }
    .item5 {
      display: block;
    }
  }
}
</style>
